<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        总结：
        深度监视：
            (1).Vue中的watch默认不监视对象内部值的改变(一层)
            (2).配置deep:true可以监视对象内部值的改变(多层)
        备注：
            (1).Vue自身可以监视对象内部值的改变,但Vue提供的watch默认不支持!
            (2).使用watch时根据数据的具体结构,决定是否采用深度监视.
     -->

    <div id ="app">
        <!-- 三元表达式： -->
        <!-- <h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2> -->

        <!-- 计算属性： -->
        <h2>今天天气很{{getHotState}}</h2>
        <button @click="changeWeather">切换天气</button>
        
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                isHot:true
            },
            // 自定义计算属性
            computed: {
                getHotState() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            // 自定义方法
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            // 监视属性(包含普通属性和计算属性)
            watch:{
                // 简写
                isHot(newValue, oldValue) {
                    console.log('isHost被修改了', newValue, oldValue)
                }
            }
        })

        // 简写
        vm.$watch('isHot',function(newValue, oldValue) {
            console.log('isHost被修改了', newValue, oldValue)
        })

    </script>
</body>
</html>